<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>admin-varlet登录</title>

    <!-- 信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <meta name="author" content="尘跃" />

    <!-- 样式表 -->
    <link rel="stylesheet" href="/css/style-varlet.css">
    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>
    <!-- Vue3 -->
    <script src="/js/vue/vue.global.prod.js"></script>
    <!-- Vue UI LIB -->
    <script src="/js/vue/varlet.js"></script>
    <script src="/js/third/touch-emulator.js"></script>
    <!-- Google ADS -->
    <!-- <meta name="google-adsense-account" content="ca-pub-7556556693775855"> -->
    <!-- <script src="/js/ads.js"></script> -->


    <style>
        .var-form {
            box-sizing: border-box;
            padding: 1em;

            display: flex;
            flex-direction: column;
            height: 80%;
            justify-content: center;
        }
    </style>
</head>


<body>

    <div id="app"></div>


    <script src="/js/http.js"></script>
    <script>
        const lightThemeMD2 = null;
        const viewportDarkThemeMD2 = Varlet.Themes.toViewport(Varlet.Themes.dark);
        const viewportLightThemeMD3 = Varlet.Themes.toViewport(Varlet.Themes.md3Light);
        const viewportDarkThemeMD3 = Varlet.Themes.toViewport(Varlet.Themes.md3Dark);

        Varlet.StyleProvider(viewportLightThemeMD3);
        const app = Vue.createApp({

            template: `
                <header>
                    <var-app-bar title="admin-varlet登录">
                        <template #right>

                            <var-menu-select
                                v-model="theme"
                                placement="top-start"
                            >
                                <var-button
                                    color="transparent"
                                    text-color="#fff"
                                    round
                                    text
                                >
                                    <var-icon name="palette" :size="32"></var-icon>
                                </var-button>

                                <template #options>
                                    <var-menu-option label="MD2亮色" value="light_md2"/>
                                    <var-menu-option label="MD2暗色" value="dark_md2"/>
                                    <var-menu-option label="MD3亮色" value="light_md3"/>
                                    <var-menu-option label="MD3暗色" value="dark_md3"/>
                                </template>
                            </var-menu-select>

                        </template>
                    </var-app-bar>
                </header>


                <var-form
                    ref="form"
                    :disabled="formDisabled"
                    :readonly="formReadonly"
                    scroll-to-error="start"
                    @submit="clickLogin"
                >
                    <var-space direction="column" :size="[14, 0]">
                        <var-input
                            variant="outlined"
                            placeholder="用户名"
                            :rules="[v => !!v || '用户名不能为空']"
                            v-model="formData.username"
                        />
                        <var-input
                            variant="outlined"
                            type="password"
                            placeholder="密码"
                            :rules="[v => !!v || '密码不能为空']"
                            v-model="formData.password"
                        />

                        <var-button block type="primary" native-type="submit">
                            登录
                        </var-button>
                    </var-space>
                </var-form>
            `,


            async mounted() {

            },

            data() {
                return {
                    theme: "light",
                    formDisabled: false,
                    formReadonly: false,
                    formData: {}
                }
            },

            watch: {
                // 每当 theme 改变时，这个函数就会执行
                theme(newTheme, _oldTheme) {
                    // console.log(newTheme);
                    if (newTheme === "light_md3") {
                        Varlet.StyleProvider(viewportLightThemeMD3);
                    } else if (newTheme === "dark_md3") {
                        Varlet.StyleProvider(viewportDarkThemeMD3);
                    } else if (newTheme === "light_md2") {
                        Varlet.StyleProvider(lightThemeMD2);
                    } else if (newTheme === "dark_md2") {
                        Varlet.StyleProvider(viewportDarkThemeMD2);
                    }
                }
            },

            methods: {

                async clickLogin(valid) {
                    if (!valid) {
                        return;
                    }
                    const username = this.formData.username;
                    const password = this.formData.password;

                    if (!username)
                    {
                        await Varlet.Dialog({
                            title: "提示",
                            message: "用户名为空",
                            confirmButton: true,
                            cancelButton: false,
                            closeOnClickOverlay: false,
                        });
                        return;
                    }
                    if (!password)
                    {
                        await Varlet.Dialog({
                            title: "提示",
                            message: "密码为空",
                            confirmButton: true,
                            cancelButton: false,
                            closeOnClickOverlay: false,
                        });
                        return;
                    }

                    HTTP.request({
                        method: "post",
                        url: "/api/user/login",
                        data: {
                            username: username,
                            password: password
                        }
                    }).then(async response => {
                        const result = response.data;
                        const token = result.data;
                        /* console.log(result); */
                        if (result.type === "failed" || !token)
                        {
                            await Varlet.Dialog({
                                title: "提示",
                                message: "登录失败",
                                confirmButton: true,
                                cancelButton: false,
                                closeOnClickOverlay: false
                            });
                            return;
                        }

                        /* axios.defaults.headers.common['token'] = token; */
                        window.localStorage.setItem("token", token);
                        window.localStorage.setItem("username", username);
                        Varlet.Dialog({
                            title: "提示",
                            message: "登录成功",
                            confirmButton: true,
                            cancelButton: false,
                            closeOnClickOverlay: false,
                            onClosed: function() {
                                window.location.assign("./index.html");
                            }
                        });
                    });
                }
            },


        });
        app.use(Varlet).mount("#app");
    </script>
</body>



</html>


